<template>
  <div class="merchat-list">
    <Breadcrumb>
      <BreadcrumbItem v-for="(name, i) in breadcrumb" :key="i">{{ name }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="list-title">查询条件</div>
    <Row type="flex">
      <Form ref="formInline" :model="formInline" inline :label-width="0" label-position="left">
        <FormItem prop="status" label="">
          <Select v-model="formInline.status" placeholder="全部人员状态" style="minWidth:162px" filterable clearable>
            <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="accountType" label="">
          <Select v-model="formInline.accountType" placeholder="全部人员类型" style="minWidth:162px" filterable clearable>
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="companyId" label="">
          <Select v-model="formInline.companyId" placeholder="全部商户" style="minWidth:162px" filterable clearable>
            <Option v-for="item in companyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="date" label="">
          <DatePicker ref="datePicker" type="daterange" @on-change="selectDate" placeholder="请选择时间" style="width: 200px;"></DatePicker>
        </FormItem>
        <FormItem label="" prop="searchContent">
          <Input type="text" v-model="formInline.searchContent" placeholder="人员姓名、手机号" clearable style="width: 300px;" />
        </FormItem>
        <div class="form-but">
          <Button type="success" @click="getList">查询</Button>
          &nbsp;&nbsp;
          <Button @click="handleReset('formInline')">清空</Button>
        </div>
      </Form>
    </Row>
    <div>
      <Button type="primary" ghost @click="newChannel" class="add">新增</Button>
      <Table class="list-table" stripe border ref="selection" :columns="columns" :data="dataList" @on-select="selectOne" @on-select-all="selectAll" @on-select-cancel="cancelOne" @on-select-all-cancel="cancelAll"></Table>
      <div class="table-page">
        <div>
          <Button type="primary" ghost :disabled="!ids.length" @click="batchEnable()">批量启用人员</Button>&nbsp;&nbsp;
          <Button type="warning" ghost :disabled="!ids.length" @click="batchDisabled()">批量禁用人员</Button>&nbsp;&nbsp;
          <Button type="error" ghost :disabled="!ids.length" @click="batchDelete()">批量删除人员</Button>
        </div>
        <Page :total="total" show-sizer show-elevator show-total @on-change="changePageNum" @on-page-size-change="changePageSize" />
      </div>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils";
import Api from "@/api";

const merchantApi = Api.Merchant;
const companyApi = Api.Company;

export default {
  name: "login",
  data() {
    return {
      breadcrumb: ["合作机构管理", "商户人员管理"],
      formInline: {
        createTimeStart: "",
        createTimeEnd: "",
        status: "",
        accountType: "",
        companyId: "",
        searchContent: "",
      },
      companyList: [],
      statusList: [
        {
          label: "启用",
          value: "1",
        },
        {
          label: "禁用",
          value: "0",
        },
      ],
      typeList: [
        {
          label: "普通用户",
          value: "1",
        },
        {
          label: "超级管理员",
          value: "0",
        },
      ],
      sfList: [
        {
          label: "是",
          value: "1",
        },
        {
          label: "否",
          value: "0",
        },
      ],
      dataList: [],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "人员姓名",
          key: "accountName",
          minWidth: 120,
        },
        {
          title: "所属商户",
          key: "companyId",
          minWidth: 180,
          tooltip: true,
          render: (h, params) =>
            h("span", {}, this.filtersCompany(params.row.companyId)),
        },
        {
          title: "组织结构",
          key: "deptName",
          minWidth: 180,
          tooltip: true,
        },
        {
          title: "手机号",
          key: "telephone",
          minWidth: 150,
        },
        {
          title: '微信Openid',
          key: 'wxOpenid',
          minWidth: 240
        },
        {
          title: "驻守案场",
          key: "stationedCase",
          minWidth: 180,
          tooltip: true,
        },
        {
          title: "是否管理员",
          key: "accountType",
          minWidth: 100,
          render: (h, params) =>
            h("span", {}, params.row.accountType === "1" ? "否" : "是"),
        },
        {
          title: "创建时间",
          key: "createTime",
          minWidth: 200,
          render: (h, params) =>
            h("div", {}, formatTime(params.row.createTime, "second")),
        },
        {
          title: "状态",
          key: "status",
          minWidth: 80,
          render: (h, params) =>
            h("span", {}, params.row.status === "1" ? "启用" : "禁用"),
        },
        {
          title: "操作",
          key: "operate",
          minWidth: 380,
          fixed: "right",
          render: (h, params) =>
            h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "15px",
                  },
                  on: {
                    click: () => {
                      this.$store.commit("fixTag", {
                        label: "编辑商户人员",
                        url: "updateMerchant?id=" + params.row.id,
                        path: "updateMerchant",
                      });
                      this.$router.push({
                        path: "/updateMerchant?id=" + params.row.id,
                      });
                    },
                  },
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    ghost: true,
                    size: "small",
                  },
                  style: {
                    marginRight: "15px",
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title:
                          params.row.accountType === "1"
                            ? "设为超管"
                            : "取消超管",
                        content:
                          params.row.accountType === "1"
                            ? "确定设为超管?"
                            : "确定取消超管?",
                        onOk: () => {
                          if (params.row.accountType === "1") {
                            this.setSupertube(params.row.id);
                          } else {
                            this.cancelSupertube(params.row.id);
                          }
                        },
                      });
                    },
                  },
                },
                params.row.accountType === "0" ? "取消超管" : "设为超管"
              ),
              h(
                "Button",
                {
                  props: {
                    type: params.row.status === "1" ? "warning" : "success",
                    size: "small",
                  },
                  style: {
                    marginRight: "15px",
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title:
                          params.row.status === "1" ? "禁用人员" : "启用人员",
                        content:
                          "确定" + params.row.status === "1"
                            ? "禁用人员?"
                            : "启用人员?",
                        onOk: () => {
                          if (params.row.status === "1") {
                            this.prohibit(params.row.id);
                          } else {
                            this.enable(params.row.id);
                          }
                        },
                      });
                    },
                  },
                },
                params.row.status === "1" ? "禁用" : "启用"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "15px",
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: "清理缓存",
                        content:
                          "将清除此用户的个人、角色数据权限缓存,是否继续?",
                        onOk: () => {
                          this.cleanPartnerCache(params.row.id);
                        },
                      });
                    },
                  },
                },
                "清理缓存"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                    display:
                      params.row.status === "1" ? "none" : "inline-block",
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: "删除人员",
                        content: "确定删除人员？",
                        onOk: () => {
                          this.deleteMerchant(params.row.id);
                        },
                      });
                    },
                  },
                },
                "删除"
              ),
            ]),
        },
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      ids: [],
    };
  },
  methods: {
    filtersCompany(companyId) {
      const id = parseInt(companyId);
      let name = "";
      this.companyList.forEach((item) => {
        if (item.value === id) {
          name = item.label;
        }
      });
      return name;
    },
    cancelAll(selection) {
      this.ids = [];
    },
    cancelOne(selection, row) {
      const i = this.ids.indexOf(row.id);
      this.ids.splice(i, 1);
    },
    selectAll(selection) {
      this.ids = [];
      this.ids = selection.map((item) => {
        return item.id;
      });
    },
    selectOne(selection, row) {
      this.ids.push(row.id);
    },
    newChannel() {
      this.$store.commit("fixTag", {
        label: "新增商户人员",
        url: "newMerchant",
      });
      this.$router.push({ path: "/newMerchant" });
    },
    // 批量启用
    async batchEnable() {
      const {
        responseCode,
        responseMessage,
        responseType,
      } = await this.$request(merchantApi.batchEnablePartnerInfo, {
        ids: this.ids,
      });
      if (responseCode === "1") {
        this.$Message.success("启用成功！");
        this.page = { pageNum: 1, pageSize: 10 };
        this.getList();
        this.ids = [];
      } else if (responseType === "ERROR") {
        this.$Message.error(responseMessage);
      } else {
        this.$Message.error("启用失败！");
      }
    },
    // 批量禁用
    async batchDisabled() {
      const {
        responseCode,
        responseMessage,
        responseType,
      } = await this.$request(merchantApi.batchDisablePartnerInfo, {
        ids: this.ids,
      });
      if (responseCode === "1") {
        this.$Message.success("禁用成功！");
        this.page = { pageNum: 1, pageSize: 10 };
        this.getList();
        this.ids = [];
      } else if (responseType === "ERROR") {
        this.$Message.error(responseMessage);
      } else {
        this.$Message.error("禁用失败！");
      }
    },
    // 批量删除
    async batchDelete() {
      const {
        responseCode,
        responseMessage,
        responseType,
      } = await this.$request(merchantApi.batchDeletePartnerInfo, {
        ids: this.ids,
      });
      if (responseCode === "1") {
        this.$Message.success("删除成功！");
        this.page = { pageNum: 1, pageSize: 10 };
        this.getList();
        this.ids = [];
      } else if (responseType === "ERROR") {
        this.$Message.error(responseMessage);
      } else {
        this.$Message.error("删除失败！");
      }
    },
    // 禁用
    async prohibit(id) {
      const {
        responseCode,
        responseMessage,
        responseType,
      } = await this.$request(merchantApi.disablePartnerInfo, { id });
      if (responseCode === "1") {
        this.$Message.success("禁用成功！");
        this.page = { pageNum: 1, pageSize: 10 };
        this.getList();
      } else if (responseType === "ERROR") {
        this.$Message.error(responseMessage);
      } else {
        this.$Message.error("禁用失败！");
      }
    },
    // 启用
    async enable(id) {
      const {
        responseCode,
        responseMessage,
        responseType,
      } = await this.$request(merchantApi.enablePartnerInfo, { id });
      if (responseCode === "1") {
        this.$Message.success("启用成功！");
        this.page = { pageNum: 1, pageSize: 10 };
        this.getList();
      } else if (responseType === "ERROR") {
        this.$Message.error(responseMessage);
      } else {
        this.$Message.error("启用失败！");
      }
    },
    // 删除
    async deleteMerchant(id) {
      const {
        responseCode,
        responseMessage,
        responseType,
      } = await this.$request(merchantApi.deletePartnerInfo, { id });
      if (responseCode === "1") {
        this.$Message.success("删除成功！");
        this.page = { pageNum: 1, pageSize: 10 };
        this.getList();
      } else if (responseType === "ERROR") {
        this.$Message.error(responseMessage);
      } else {
        this.$Message.error("删除失败！");
      }
    },
    // 设为超管
    async setSupertube(id) {
      const { responseCode, responseMessage } = await this.$request(
        merchantApi.installAdminPartnerInfo,
        { id }
      );
      if (responseCode === "1") {
        this.$Message.success("设为超管成功！");
        this.page = { pageNum: 1, pageSize: 10 };
        this.getList();
      } else {
        this.$Message.error(responseMessage || "设为超管失败！");
      }
    },
    // 取消超管
    async cancelSupertube(id) {
      const { responseCode, responseMessage } = await this.$request(
        merchantApi.cancelAdminPartnerInfo,
        { id }
      );
      if (responseCode === "1") {
        this.$Message.success("取消超管成功！");
        this.page = { pageNum: 1, pageSize: 10 };
        this.getList();
      } else {
        this.$Message.error(responseMessage || "取消超管失败！");
      }
    },
    // 禁用缓存(用户及用户角色权限)
    async cleanPartnerCache(id) {
      const {
        responseCode,
        responseMessage,
        responseType,
      } = await this.$request(merchantApi.cleanPartnerCache, { id });
      if (responseCode === "1") {
        this.$Message.success("清除成功！");
        this.page = { pageNum: 1, pageSize: 10 };
        this.getList();
      } else if (responseType === "ERROR") {
        this.$Message.error(responseMessage);
      } else {
        this.$Message.error("清除失败！");
      }
    },
    selectDate(date) {
      this.formInline.createTimeStart = date[0];
      this.formInline.createTimeEnd = date[1];
    },
    // 分页变化
    changePageNum(pageNum) {
      this.getList({ pageNum });
    },
    // 条数变化
    changePageSize(pageSize) {
      this.getList({ pageSize });
    },
    async handleReset(name) {
      this.$refs[name].resetFields();
      this.$refs.datePicker.handleClear();
      this.formInline.createTimeStart = "";
      this.formInline.createTimeEnd = "";
      this.page = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
    },
    async getList(paramsPage = null) {
      let pageNum;
      let pageSize;
      let page;
      const statePage = this.page;
      if (paramsPage) {
        pageNum = paramsPage.pageNum || statePage.pageNum;
        pageSize = paramsPage.pageSize || statePage.pageSize;
        page = { pageNum, pageSize };
        this.page = { pageNum, pageSize };
      } else {
        page = statePage;
      }
      const formInline = this.formInline;
      const value = {};
      Object.keys(formInline).forEach((key) => {
        if (formInline[key]) {
          value[key] = formInline[key];
        }
      });
      const params = {
        page,
        ...value,
      };
      const { responseCode, data } = await this.$request(
        merchantApi.listPartnerInfo,
        params
      );
      if (responseCode === "1") {
        this.dataList = data.list;
        this.total = data.totalCount;
      }
    },
    async getCompanyList() {
      const { responseCode, data } = await this.$request(
        companyApi.listOptionCompany
      );
      if (responseCode === "1") {
        this.companyList = data;
      }
    },
  },
  mounted() {
    this.getCompanyList();
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.merchat-list {
  .ivu-form-item {
    margin-right: 20px;
  }
  .form-but {
    display: inline-block;
    margin-bottom: 24px;
  }
  .list-title {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #333;
  }
  .add {
    margin-bottom: 10px;
  }
  .table-page {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
  }
}
</style>
